<template>
	<view>
		<u-tabbar @change="changeTab" :value="tabIndex" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
			:border="false" activeColor="#F3D2BA" inactiveColor="#fff">
			<u-tabbar-item :class="itemIndex == 2?'center-item':''" :text="item.text" :name="item.name" icon=""
				v-for="(item, itemIndex) in tabList" v-bind:key="item.name" @click="tabClick(item.path)">
				<image class="slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
				<image class="slot-icon" slot="inactive-icon" :src="item.iconPath">
				</image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>
<script>
	import {
		getToken,
		getUserInfo
	} from "@/utils/storage/index.js";
	export default {
		name: "tabbar",
		props: {
			tabIndex: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				tabList: [{
						name: 0,
						path: "/pages/HomePage/HomePage",
						iconPath: "/static/images/tabbar/homePagef.svg",
						selectedIconPath: "/static/images/tabbar/homePage.svg",
						text: "首页",
					},
					{
						name: 1,
						path: "/pages/Community/Community",
						iconPath: "/static/images/tabbar/communityf.svg",
						selectedIconPath: "/static/images/tabbar/community.svg",
						text: "社区",
					},
					{
						name: 2,
						path: "/pages/AI/AI",
						iconPath: "/static/images/tabbar/ai.png",
						selectedIconPath: "/static/images/tabbar/ai.png",
						text: "AI",
					},
					{
						name: 3,
						path: "/pages/ShoppingMall/ShoppingMall",
						iconPath: "/static/images/tabbar/mallf.svg",
						selectedIconPath: "/static/images/tabbar/mall.svg",
						text: "商城",
					},
					{
						name: 4,
						path: "/pages/PersonalCenter/PersonalCenter",
						iconPath: "/static/images/tabbar/myf.svg",
						selectedIconPath: "/static/images/tabbar/my.svg",
						text: "我的",
					},
				],
			};
		},

		methods: {
			getToken,
			changeTab(e) {},
			tabClick(path) {
				uni.switchTab({
					url: path,
				});
			},
		},
	};
</script>

<style lang="scss">
	::v-deep .u-tabbar__content {
		background-color: #1B1B1B;

		.u-tabbar-item__text {
			font-size: 9px;
		}
	}

	.slot-icon {
		width: 26px;
		height: 26px;
	}



	.center-item {
		position: relative;

		::v-deep .u-tabbar-item__icon {
			position: absolute;
			top: 0;
			transform: translateY(-40%);
		}

		::v-deep.u-tabbar-item__text {
			margin-top: 26px;
		}

		.slot-icon {

			width: 40px;
			height: 40px;
		}
	}

	::v-deep .u-tabbar--fixed {
		bottom: -2px;
	}
</style>